<template>
  <div></div>
</template>

<script>
import { reactive, readonly, watchEffect } from "vue";
export default {
  name: "readonly",
  setup() {
    // 用readonly包装的对象可以是：普通对象 响应式的对象(reactive) ref的对象
    // 用readonly包装后会返回一个只读的proxy
    // 是深度的
    // 任何一层的访问都是只读的
    const reactiveObj = reactive({
      a: 1,
      b: 2,
      c: {
        d: 3,
        e: 4,
      },
    });
    const newReactiveObj = readonly(reactiveObj);
		watchEffect(()=>{
			console.log(newReactiveObj.c.e);
		})
    reactiveObj.a = 2;
    console.log("🍎without readonly🍎" + reactiveObj.a);
		// newReactiveObj.a = 2
		console.log("🍎with readonly🍎" + newReactiveObj.a); // 不可更改,只读的
  },
};
</script>

<style></style>
